*{
    margin: 0;
    padding: 0;
}

/*页面一布局*/
.first{
    background: skyblue;

}
.first>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.first .logo{
    background: url(../images/logo.png);
    width: 251px;
    height: 186px;
}
.first .text{
    padding: 20px 0;
}
.first .text img{
    margin: 0 20px;
    opacity: 0;
}

.first .info{
    background: url(../images/info_1.png);
    width: 772px;
    height: 49px;
    position: absolute;
    bottom:100px;
    /*transform: scale(0);*/
    transform-origin: right center;

}
.first .cover{
    width: 772px;
    height: 49px;
    position: absolute;
    bottom:100px;
    background: skyblue;
    /*transform: scale(0);*/
    transform-origin: right center;
}
/*页面一动画*/
.first.animated img{
    margin: 0;
    opacity: 1;
    transition: all 1s;
}
.first.animated .cover{
    width:772px;
    transform: scaleX(0);
    transition-timing-function: steps(5);
    transition: all 5s 1s;
}




/*页面二布局*/
.second{
    background: yellowgreen;
}
.second>div{
    display: flex;

}
.second .shield{

    width:500px;
    height:100%;
    margin:0  30px;


}
.second .shield img:nth-child(3){
    transform: translate(200px,100px) rotateZ(45deg);
}
.second .shield img:nth-child(5){
    transform: translate(300px,200px) rotateZ(45deg);
}

.second .info{

    background: url(../images/info_2.png);
    width: 635px;
    height: 309px;

}

/*页面2动画*/
.second.animated .shield img:nth-child(3){
    transform: rotateZ(0deg) translate(0px,0px);
    transition: all 1s;
}
.second.animated .shield img:nth-child(5){
    transform: translate(0px,0px) rotateZ(0deg);
    transition: all 1s ;
}

/*页面三布局*/
.third{
    background: hotpink;
}
.third>div{
    display: flex;
    position: relative;
}
.third .info{
    background: url(../images/info_3.png);
    width: 631px;
    height: 278px;
    margin-left: 50px;
}
.third .rocket{
    background: url(../images/rocket.png);
    width: 203px;
    height: 204px;
    position: absolute;
    left:0;
    bottom: 0;
    transform: translateX(-203px);
}
.third .circle{
    background: url(../images/circle.png);
    width: 453px;
    height: 449px;
    margin-left: 100px;
    margin-top: -60px;

}
/*页面三动画*/
.third.animated .rocket{
    transform: translate(900px,-230px);
    transition: all 1s;
}
.third.animated .circle{
    transform: rotateZ(1000000deg);
    transition:all 10000s;


}



/*页面四布局*/
.fourth{
    background: lightgreen;
}
.fourth>div{
    display: flex;
}
.fourth .searchBar{
   position: relative;
    transform: translateX(-2000px);
}
.searchBar .search{
    background: url(../images/search.png);
    width: 529px;
    height: 66px;
}
.searchBar .key{
    background: url(../images/key.png);
    width: 0px;
    height: 22px;
    position: absolute;
    top:23px;
    left:22px;
}

.searchBar .result{
   background: url(../images/result.png);
    width: 529px;
    height: 0px;
}
.fourth .info{
    background: url(../images/info_4.png);
    width: 612px;
    height: 299px;
    margin-left: 100px;
}
/*页面四动画*/
.fourth.animated .searchBar{
    transform: translate(0px);
    transition: all 1s;
}
.fourth.animated .key{
    width:99px;
    transition-timing-function: steps(5,end);
    transition: all 1.5s 2s;

}
.fourth.animated .result{
    height:372px;
    transition: all 2s 3.5s ;
}

/* 页面五*/
.fifth{
    background: orange;
}
.fifth>div{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fifth .info{
    background: url(../images/info_5.png);
    width: 1077px;
    height: 134px;
    margin-top: -150px;
}
.fifth .browser{
    width: 1004px;
    /*必须添加，如果不添加browser的默认高度就是toolBar的高度，底部的extra就不会到下面*/
    flex:1;
    position: relative;
}
.fifth .browser .toolBar{
    background: url(../images/toolbar.png);
    width: 1004px;
    height: 79px;
}
.fifth .browser .extra{
    background: url(../images/extra.png);
    width: 394px;
    height: 29px;
    position: absolute;
    bottom:0;
    right:0;

}
/*四根线*/
.browser .line{
    position: absolute;
    background-color: white;
}
.browser .top{
    width:100%;
    height:2px;
    top:0;
    left: 0;
    transform: translateX(2000px);
    opacity: 0;
}
.browser .left{
    height: 100%;
    width:2px;
    left:0;
    top:0;
    transform:translateY(-2000px) ;
    opacity: 0;
}
.browser .bottom{
    width: 100%;
    height:2px;
    bottom:0;
    left:0;
    transform: translateX(-2000px);
    opacity: 0;
}
.browser .right{
    height:100%;
    width:2px;
    right:0;
    top:0;
    transform: translateY(2000px);
    opacity: 0;
}

/*页面五动画*/
.fifth.animated .browser .top{
    transform: translateX(0px);
    opacity: 1;
    transition: all 1s;

}
.fifth.animated .browser .left{
    transform: translateY(0px);
    opacity:1;
    transition: all 1s;

}
.fifth.animated .browser .bottom{
    transform: translateX(0px);
    opacity: 1;
    transition: all 1s;

}
.fifth.animated .browser .right{
    transform: translateY(0px);
    opacity: 1;
    transition: all 1s;

}